<template>
  <div class="analysisContainer h-flex">
    <div class="h-flex-elastic" style="overflow: hidden;">
      <div class="analysisPictureContainer">
        <div class="pictureWrapper" style="width: 100%; height: calc(100%);">
          <el-container>
            <el-aside width="270px" class="phm-tanc" :class="{ phmtancshow: isActive }">
              <div class="middle_outer">
                <div class="details-title">当前设备拍摄照片（{{ ImgSrcList.length }}）张</div>
                <div id="center" ref="content" class="imgs">
                  <div id="wrap" ref="scrollbody" class="wrap" style="top: 0;">
                    <ul>
                      <li v-for="(img, index) in ImgSrcList" :key="index">
                        <img :class="{selected: index===curIndex}" :src="getcompressImage(img)" :alt="index" @error="handleImgError" @click="currentImgSrc = img;curIndex = index"></li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-aside>
            <el-main>
              <div class="divImgBox" @click="isActive=false">
                <a4c-imgs :picpath="currentImgSrc" />
                <!-- <el-image
                  class="item6c-img"
                  :src="currentImgSrc"
                  :preview-src-list="ImgSrcList" /> -->
              </div>
            </el-main>
            <el-aside width="270px" class="phm-tancr" :class="{ phmtancshowr: isActive }">
              <div class="middle_outer">
                <div class="details-title">基本信息</div>
                <div v-if="checkdata.trainNo" class="imgs">
                  <div class="wrap">
                    <p style="margin-top:10px;">检测日期：{{ parseTime(checkdata.detectDate, '{y}-{m}-{d} {h}:{i}') }}</p>
                    <p>设备：{{ checkdata.detectDeviceAttr.detectDeviceName }}</p>
                    <p>线路: {{ checkdata.lineAttr.lineName }}</p>
                    <p>区间：{{ checkdata.siteAttr.siteName }}</p>
                    <p>支柱号：{{ checkdata.pillarAttr.pillarNum }}</p>
                    <p>公里标：{{ formatRoad(checkdata.roadMark) }}</p>
                    <p>机车号码：{{ checkdata.trainNo }}</p>
                    <p>安装位置：{{ checkdata.siteAttr.siteName }}{{ checkdata.pillarAttr.pillarNum }}#支柱</p>
                    <p>段别：{{ checkdata.section }}</p>
                    <p>状态：<span :class="checkdata.status?'corGreen':'corRed'">{{ checkdata.status?'已分析':'未分析' }}</span></p>
                    <p>图片：<span :class="checkdata.status?'corGreen':'corRed'">{{ checkdata.picIV?'有效':'无效' }}</span></p>
                    <p class="p-btn"><el-button size="mini" type="primary" @click="prev">上一个</el-button>
                      <el-button size="mini" type="primary" @click="next">下一个</el-button>
                      <el-button size="mini" type="primary" @click="downloadIamge(checkdata)">下载图片</el-button></p>
                  </div>
                </div>
              </div>
            </el-aside>
          </el-container>
        </div>
      </div>
    </div>
    <div v-show="!isActive" class="showdiv" @click="isActive=true">
      <i class="el-icon-arrow-left" />
      详情
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import A4cImgs from './A4cImgs'
import { imgDownLoad } from '@/api/cms/detect-data'
export default {
  name: 'Analysis5C',
  components: {
    A4cImgs
  },
  props: {
  },
  data() {
    return {
      isActive: true,
      checkdata: {},
      checknum: 0,
      alldata: [],
      currentImgSrc1: '',
      ImgSrcList: [],
      parseTime: parseTime,
      curIndex: 0,
      currentImgSrc: ''
    }
  },
  watch: {
  },
  methods: {
    getList(val, num) {
      this.checknum = num
      this.alldata = val
      this.getvalue()
    },
    getvalue() {
      this.checkdata = this.alldata[this.checknum]
      this.currentImgSrc = this.checkdata.detectPicture[0].filePath || ''
      this.ImgSrcList = []
      for (const item of this.checkdata.detectPicture) {
        this.ImgSrcList.push(item.filePath)
      }
    },
    downloadIamge(val) { // 下载图片地址和图片名
      var obj = {
        id: val._id
      }
      imgDownLoad(obj).then(res => {
        const eleLink = document.createElement('a')
        eleLink.download = `${val.pillarAttr.pillarNum}_` + parseTime(val.detectDate, '{y}-{m}-{d}') + `_5C图片.zip`
        var blob = new Blob([res])
        eleLink.href = URL.createObjectURL(blob)
        document.body.appendChild(eleLink)
        eleLink.click()
        document.body.removeChild(eleLink)
      })
    },
    // 上一个
    prev() {
      if (this.checknum <= 0) {
        this.$message('已到了本页第一条，请返回翻页查看')
        return
      }
      this.checknum--
      this.getvalue()
    },
    // 下一个
    next() {
      if (this.checknum >= this.alldata.length - 1) {
        this.$message('已到了本页最后一条，请返回翻页查看')
        return
      }
      this.checknum++
      this.getvalue()
    }
    // prevScroll() {
    //   // 图片翻页
    //   if (this.curIndex <= 0) return
    //   this.curIndex--
    //   this.currentImgSrc = this.ImgSrcList[this.curIndex]
    //   document.getElementById('wrap').scrollTop -= this.$refs.scrollbody.offsetHeight
    // },
    // nextScroll() {
    //   if (this.curIndex >= this.ImgSrcList.length - 1) return
    //   this.curIndex++
    //   this.currentImgSrc = this.ImgSrcList[this.curIndex]
    //   document.getElementById('wrap').scrollTop += this.$refs.scrollbody.offsetHeight
    // }
  }
}
</script>

<style lang="scss" scoped>
  .analysisContainer {
    height: 100%;
    color: #fff;
    background: rgb(233, 233, 233);

    .analysisPictureContainer {
      position: relative;
      z-index: 1;
      height: 100%;
      padding: 0;

      .divImgBox {
        position: relative;
        width: 100%;
        height: 100%;

        .el-image {
          height: 100%;
          width: 100%;
        }
      }

      .el-main {
        padding: 20px;
      }

      .el-aside {
        margin-top: 1px;
        height: calc(100% - 4px);
        padding-right: 0;
        margin-bottom: 0;
        text-align: center;
        background: white;
        .details-title{
            height: 40px;
            line-height: 40px;
            color: white;
            background: #409eff;
          }
        p{
            height: 38px;
            line-height: 38px;
            padding-left: 8px;
            color: black;
            text-align: left;
            .corGreen{
              color: rgb(26, 194, 3);
            }
            .corRed{
              color: red;
            }
          }
        .p-btn{
          margin-top: 10px;
          border-top:1px solid rgb(204, 204, 204);
          padding-top: 10px;
        }
        .middle_outer {
          position: relative;
          height: calc(100%);

          .imgs {
            position: relative;
            height: calc(100% - 40px);
            overflow: hidden;

            .wrap {
              position: absolute;
              top: 0;
              bottom: 0;
              width: 100%;
              height: calc(100%);
              overflow: auto;
              overflow-x: hidden;

              ul {
                width: 100%;
                height: calc(100% -10px);
                padding: 0 4px 0 0;
                margin: 2px 2px;
                white-space: nowrap;

                li {
                  display: block;
                  width: calc(100% - 10px);
                  height: 180px;
                  margin: 5px;
                  text-align: center;
                  list-style: none;

                  img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    border: 3px solid transparent;

                    &.selected {
                      border-color: #6a9af4;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .pillar-query-list {
        height: 80px;
      }

      .pillar-query-list + .el-container {
        height: calc(100% - 80px);
      }

      .el-container {
        height: 100%;
      }
    }
  }
.phm-tanc {
  position: relative;
  overflow: auto;
  left: -330px;
  transition: all 0.4s linear;
}
.phmtancshow {
  left: 0;
}
.phm-tancr {
  position: relative;
  overflow: auto;
  right: -330px;
  transition: all 0.4s linear;
}
.phmtancshowr {
  right: 0;
}
.el-main{
  overflow: initial;
}
.showdiv{
  position: absolute;
  top: 43px;
  background: #409eff;
  text-align: center;
  cursor: pointer;
  right: 0;
  width: 64px;
  height: 40px;
  z-index: 10;
  opacity: 0.8;
  line-height: 40px;
}
</style>
